<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div class="container">
        这是一个容器
        <div class="table">
            <li class="li">1</li>
            <li class="li">2</li>
            <li class="li">3</li>
        </div>
    </div> -->

    <!-- <input id="button" type="button" value="点击弹框" onclick="sayHello()"> -->

    <!-- <input id="counter" type="text" value="0" style="width: 20px;">
    
    <input type="button" value="+1" onclick="add()">
    <input type="button" value="-1" onclick="sub()"> -->

    <script>
        // let counter = document.querySelector('#counter');
        // function add() {
        //     // 获取输入框的值，并+1
        //     // console.log(typeof(counter.value));
        //     counter.value = parseInt(counter.value) + 1;
        // }

        // function sub() {
        //     // 获取输入框的值，并-1
        //     counter.value = parseInt(counter.value) - 1;
        // }

        // 如何实现点击弹框呢？
        // 通过绑定点击事件来实现点击按钮弹框
        // 方式一：通过获取标签对象来绑定
        // let button = document.querySelector('#button');
        // // 绑定/注册 点击事件
        // button.onclick = function() {
        //     alert('hello world');
        // }
        
        // 方式二：直接在标签中 注册/绑定 事件
        // function sayHello() {
        //     alert('hello world');
        // }


        // // 获取 class=container 的div
        // // 这里是根据 css选择器 来获取的，得到的是该标签整体
        // let div = document.querySelector('.container');
        // console.log(div);
        
        // // 得到的是一个数组
        // let lis = document.querySelectorAll('.container .table .li');
        // // console.log(lis);
        // for (let i = 0; i < lis.length; i++) {
        //     console.log(lis[i]);
        // }
    </script>
</body>
</html>